<template>
  <div class="calendar">
    <!-- <div class="weekdays flex_row around">
      <div
        class="weekday flex_center"
        v-for="day in getCurrentWeekdays"
        :key="day"
      >
        {{ day }}
      </div>
    </div> -->
    <Swipe :autoplay="0" indicator-color="white" @change="onSwipeChange">
      <SwipeItem v-for="(week, index) in weeks" :key="index">
        <div class="dates flex_row around">
          <div
            class="date"
            v-for="(date, dateIndex) in week"
            @click="selectDate(date)"
            :key="dateIndex"
          >
            <span>{{ getWeekday(date) }}</span
            ><br />
            <span :class="{ currentDay: isCurrentDay(date) }">{{
              date.getDate()
            }}</span>
          </div>
        </div>
      </SwipeItem>
    </Swipe>
  </div>
</template>

<script>
import { getTimestamp } from "@/utils/time.js";
// import { VanSwipe, VanSwipeItem } from "vant";

export default {
  //   components: {
  //     VanSwipe,
  //     VanSwipeItem,
  //   },
  data() {
    return {
      weekdays: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
      currentDate: new Date(),
      weeks: [],
      selectedDate: null,
      currentSwipeIndex: 0,
      maxSwipeIndex: 1, // 最多滑动到第二周
    };
  },
  computed: {
    getCurrentWeekdays() {
      return this.weekdays;
    },
  },
  created() {
    this.generateWeeks();
    this.selectDate(new Date());
  },
  methods: {
    getTimestamp,
    getWeekday(date) {
      if (!(date instanceof Date)) {
        return "未知";
      }
      const weekdayMap = [
        "周日",
        "周一",
        "周二",
        "周三",
        "周四",
        "周五",
        "周六",
      ];
      return weekdayMap[date.getDay()];
    },
    // 选择日期
    selectDate(date) {
      if (!(date instanceof Date)) {
        return;
      }
      this.selectedDate = new Date(date);
      // 设置时间为当天零点
      this.selectedDate.setHours(0, 0, 0, 0);

      this.$emit("selectDate", {
        currentMonth: this.selectedDate.getMonth() + 1,
        currentYear: this.selectedDate.getFullYear(),
        cd: this.selectedDate.getDate(),
      });
      this.$emit("getDate", this.selectedDate);
    },
    // 生成往后两周的日期
    // generateWeeks() {
    //   let startDate = new Date(this.currentDate);
    //   this.weeks = [];
    //   for (let i = 0; i < 2; i++) {
    //     let week = [];
    //     for (let j = 0; j < 7; j++) {
    //       let date = new Date(startDate);
    //       date.setDate(startDate.getDate() + i * 7 + j);
    //       if (!(date instanceof Date)) {
    //         console.error("生成的不是 Date 对象:", date);
    //       }
    //       week.push(date);
    //     }
    //     this.weeks.push(week);
    //   }
    // },
    generateWeeks() {
      let startDate = new Date(this.currentDate);
      this.weeks = [];
      // 修改循环范围，只生成一周的日期
      let week = [];
      for (let j = 0; j < 7; j++) {
        let date = new Date(startDate);
        date.setDate(startDate.getDate() + j);
        if (!(date instanceof Date)) {
        }
        week.push(date);
      }
      this.weeks.push(week);
    },
    // 判断是否为当前选中日期
    isCurrentDay(date) {
      if (!this.selectedDate) return false;
      return (
        date.getFullYear() === this.selectedDate.getFullYear() &&
        date.getMonth() === this.selectedDate.getMonth() &&
        date.getDate() === this.selectedDate.getDate()
      );
    },
    // 滑动事件处理
    onSwipeChange(index) {
      // 可以在这里添加滑动后的逻辑，例如更新当前日期范围
      if (index <= this.maxSwipeIndex) {
        this.currentSwipeIndex = index;
      } else {
        // 如果超过最大滑动索引，保持在最后一周
        this.currentSwipeIndex = this.maxSwipeIndex;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.calendar {
  width: 100%;
  height: 83.33px;
  background: #ffffff;
  .weekdays {
    width: 100%;
    .weekday {
      width: 38.19px;
      height: 38.19px;
      font-size: 13.89px;
      font-family: Microsoft YaHei, Microsoft YaHei-Regular;
      font-weight: bold;
      text-align: left;
      color: #333333;
    }
  }
  .date_box {
    width: 100%;
    height: 40px;
    overflow-x: sc;
    overflow: hidden;
  }
  .date_box {
    width: 100%;
    height: auto; // 调整高度以适应内容
    overflow-x: scroll; // 修正拼写错误
    overflow-y: hidden;
  }
  .dates {
    .date {
      width: 38.19px;
      height: 38.19px;
      text-align: center;
      line-height: 38.19px;

      font-size: 13.89px;
      font-family: Microsoft YaHei, Microsoft YaHei-Regular;
      font-weight: bold;
    }
    .date span.currentDay {
      display: inline-block;
      width: 38.19px;
      height: 38.19px;
      color: #fff;
      background: linear-gradient(
          0deg,
          #ffffff -90%,
          rgba(255, 255, 255, 0) 100%
        ),
        #00aeff;
      border-radius: 50%;
    }
  }
}
</style>
